//  pages/rechargecard / hairpin / index.js
var a = getApp(), t = a.requirejs("core"), e = a.requirejs("biz/order");
import { base64src } from '../../../utils/base64src.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  // // 保存图片
  save(src) {
    let that = this;
    let url = src
    //若二维码未加载完毕，加个动画提高用户体验
    wx.showToast({
      icon: 'loading',
      title: '正在保存图片',
      duration: 1000
    })
    //判断用户是否授权"保存到相册"
    wx.getSetting({
      success(res) {
        //没有权限，发起授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {//用户允许授权，保存图片到相册
              that.savePhoto(url);
            },
            fail() {//用户点击拒绝授权，跳转到设置页，引导用户授权
              wx.openSetting({
                success() {
                  wx.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success() {
                      that.savePhoto(url);
                    }
                  })
                }
              })
            }
          })
        } else {//用户已授权，保存到相册
          that.savePhoto(url)
        }
      }
    })
  },
  //保存图片到相册，提示保存成功
  savePhoto(e) {
    let that = this
    wx.saveImageToPhotosAlbum({
      filePath: e,
      success(res) {
        wx.showToast({
          title: '保存成功',
          icon: "success",
          duration: 1000
        })
      }
    })
    // wx.downloadFile({
    //   url: e,
    //   success: function (res) {

    //   }
    // })
  },
  shareFrends(e) {
    wx.showLoading({
      title: '图片生成中',
    })
    let that = this;

    const ctx = wx.createCanvasContext('shareFrends');    //绘图上下文
    wx.downloadFile({    //网络图片需要先下载到本地
      url:that.data.imgUrlbg,
      success(res) {
        
        if (res.statusCode === 200) {
          console.log(res,7878);
          ctx.save();
          ctx.drawImage(res.tempFilePath, 0, 0, 320, 475);
          wx.downloadFile({
            url: that.data.avatar,
            success: function (res) {
              console.log(res);
              // 通过arc来绘制一个圆形区域
              ctx.beginPath();
              ctx.arc(35, 28, 20, 0, Math.PI * 2, false);
              ctx.clip(); //剪切路径
              ctx.drawImage(res.tempFilePath, 15, 8, 40, 40);
              //恢复状态
              ctx.restore();
              //面额区域
              const grd = ctx.createLinearGradient(50, 180, 220, 0);//创建了一个线性的渐变颜色 前两个参数起点横纵坐标，后两个参数终点横纵坐标
              grd.addColorStop(0, that.data.bg1);
              grd.addColorStop(1, that.data.bg2);
              ctx.setFillStyle(grd);                             //为创建的canvans上下文添充颜色  如果没有设置 fillStyle，默认颜色为 black。
              
              ctx.fillRect(50, 180, 220, 125);
              
              // 透明层
              ctx.fillStyle = 'rgba(225,225,225,0.3)';
              ctx.fillRect(50, 180, 220, 125);
              const grd1 = ctx.createLinearGradient(60, 190, 200, 0);//创建了一个线性的渐变颜色 前两个参数起点横纵坐标，后两个参数终点横纵坐标
              grd1.addColorStop(0, that.data.bg1);
              grd1.addColorStop(1, that.data.bg2);
              ctx.setFillStyle(grd);                             //为创建的canvans上下文添充颜色  如果没有设置      fillStyle，默认颜色为 black。
              ctx.fillRect(60, 190, 200, 105);
              // // 透明层
              ctx.fillStyle = 'rgba(225,225,225,0.2)';
              ctx.fillRect(60, 190, 200, 105);
      
              const grd2 = ctx.createLinearGradient(70, 200, 180, 0);//创建了一个线性的渐变颜色 前两个参数起点横纵坐标，后两个参数终点横纵坐标
              grd2.addColorStop(0, that.data.bg1);
              grd2.addColorStop(1, that.data.bg2);
              ctx.setFillStyle(grd);                             //为创建的canvans上下文添充颜色  如果没有设置      fillStyle，默认颜色为 black。
              ctx.fillRect(70, 200, 180, 85);
      
              ctx.setFillStyle("#fff");
              ctx.setFontSize(20);                               //字大小
              ctx.setTextAlign('center');                        //是否居中显示，参考点画布中线
              ctx.fillText('面额：' + that.data.enough + '元', 160, 250);            //150:canvas画布宽300，取1/2，中间，280：纵向位置
              
              ctx.beginPath();
              ctx.arc(160, 370, 40, 0, Math.PI * 2, false);
              ctx.clip(); //剪切路径
              ctx.drawImage(that.data.shareQr, 120, 330, 80, 80);
              //恢复状态
              ctx.restore();
              
      
              // ctx.setFillStyle("#000");
              // ctx.setFontSize(12);                               
              // ctx.setTextAlign('left');
              // ctx.fillText('点击保存此图片，发给领卡的人', 30, 405);
              // ctx.fillText('对方扫码确认后，你将在小程序上收到领卡申请', 30, 425);
              // ctx.fillText('在小程序同意后，此卡方可发给对方', 30, 445);
      
              ctx.draw();
              // canvas画图需要时间而且还是异步的，所以加了个定时器
              setTimeout(() => {
                // 将生成的canvas图片，转为真实图片
                wx.canvasToTempFilePath({
                  x: 0,
                  y: 0,
                  canvasId: 'shareFrends',
                  success: function (res) {
                    console.log(res, 7878)
                    let shareImg = res.tempFilePath;
                    that.setData({
                      shareImg: shareImg,
                      showModal: true,
                      showShareModal: false
                    })
                    that.save(shareImg);
                  },
                  fail: function (res) {
                  }
                })
              }, 500)
            }
          })
        }
      }
    })
    



  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var id = options;
    this.setData({
      imgUrlbg: a.globalData.approot +'static/images/fakbg1.jpg'
  }),
    this.getdetail(id);

  },
  getdetail: function (id) {
    var that = this;
    console.log(id, 999);

    var a = this;
    t.get('member/rechargedetail', { id: id }, function (e) {
      console.log(e, 8888)
      if (e.card_style == 'card-style-golden') {
        a.setData({
          bg1: '#c1a167',
          bg2: '#e9d5aa'
        })
      }
      if (e.card_style == 'card-style-erythrine') {
        a.setData({
          bg1: '#745757',
          bg2: '#966d6d'
        })
      }
      if (e.card_style == 'card-style-gray') {
        a.setData({
          bg1: '#434247',
          bg2: '#7a7985'
        })
      }
      if (e.card_style == 'card-style-brown') {
        a.setData({
          bg1: '#736e6c',
          bg2: '#978c8c'
        })
      }
      if (e.card_style == 'card-style-blue') {
        a.setData({
          bg1: '#576074',
          bg2: '#6d7b96'
        })
      }
      if (e.card_style == 'card-style-black') {
        a.setData({
          bg1: '#373737',
          bg2: '#4a4a4a'
        })
      }
      a.setData({
        avatar: e.avatar,
        card_style: e.card_style,
        enough: e.enough,
        images: "data:image/jpg;base64," + e.images
      })
      var sharepr = "data:image/jpg;base64," + e.images;
      base64src(sharepr, res => {
        console.log(res) // 返回图片地址，直接赋值到image标签即可
        a.setData({
          shareQr: res
        })
      });

    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})